<template>
  <div class="person_page">
    <div class="person wrap">
      <main>
        <aside>
          <div class="avatar">
            <img
              src="../assets/img/启明.jpg"
              style="text-align: center; width: 100px; height: 100px"
            />
          </div>
          <div class="name">
            姜刘旭
            <span @click="loginOutFn" style="cursor: pointer">[退出]</span>
          </div>
          <div class="title">
            <img src="../assets/img/启明.jpg" width="20" alt="交易管理" />
            交易管理
          </div>
          <ul class="list">
            <li :class="isshowcart == true ? 'active' : ''" @click="cart">
              购物车
            </li>
          </ul>
          <div class="title">
            <img src="../assets/img/启明.jpg" width="20" alt="交易管理" />
            个人信息管理
          </div>
          <ul class="list">
            <li :class="isshowcart == false ? 'active' : ''" @click="adress">
              地址管理
            </li>
          </ul>
        </aside>
        <article v-show="isshowcart">
          <div class="cart_title">
            <div class="cart1">商品信息</div>
            <div class="cart1">兑换金币</div>
            <div class="cart1">数量</div>
            <div class="cart1">操作</div>
          </div>
          <div
            v-for="(item, index) in shoppingCart"
            :key="index"
            class="cart_detail"
          >
            <div>
              <img :src="item.img" alt="" />
              <div class="cart1">{{ item.name }}</div>
            </div>
            <div class="cart2">{{ item.jiage }}</div>
            <div class="cart2">
              <button style="width: 40px; height: 40px" @click="sub(index)">
                -
              </button>
              <span style="font-size: 20px; margin: 0px 10px">{{
                item.goodsnum
              }}</span>
              <button style="width: 40px; height: 40px" @click="add(index)">
                +
              </button>
            </div>
            <div class="cart2">
              <button style="width: 40px; height: 40px" @click="sc(index)">
                删除
              </button>
            </div>
          </div>
          <div class="total">总计:{{ allprice }}<span>金币</span></div>
          <div  style="text-align: right;">
            <el-button
              type="text"
              @click="dialogTableVisible = true"
              class="buyNow"
            >
              结算
            </el-button>
            <div  style="text-align: left;">
            <el-dialog title="付款" :visible.sync="dialogTableVisible">
              <img
                src="@/assets/img/收款.jpg"
                alt=""
                style="width: 300px; height: 300px"
              />
              <img
                src="@/assets/img/zfb收款.jpg"
                alt=""
                style="width: 300px; height: 300px"
              />
            </el-dialog>
          </div>
          </div>
        </article>
        <article v-show="!isshowcart">
          <div id="app">
            <h1 class="address" style="text-align: center">收货地址</h1>
            <div style="display: flex; width: 100vw">
              <div style="width: 300px">
                收货人名称：<input type="text" v-model="name" />
              </div>
              <div style="width: 300px">
                收货人手机号：<input type="text" v-model="phone" />
              </div>
              <div style="width: 300px">
                收货人地址：<input type="text" v-model="address" />
              </div>
              <button @click="add_address">添加</button><br />
            </div>
            <table>
              <tr>
                <th style="width: 300px">收货人名称</th>
                <th style="width: 300px">收货人手机号</th>
                <th style="width: 300px">收货人地址</th>
              </tr>
              <tr v-for="(item, index) in addressArr" :key="index">
                <th style="margin-top: 20px">{{ item.address_name }}</th>
                <th>{{ item.address_phone }}</th>
                <th>{{ item.address_address }}</th>
                <th>
                  <button @click="scaddress(index)">删除</button>
                </th>
              </tr>
            </table>
          </div>
        </article>
      </main>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import store from "@/store";
export default {
  data() {
    return {
      isshowcart: true,
      shoppingCart: [],
      shoppingCart2: [],
      cartnum: 1,
      allprice: 0,
      name: "",
      phone: "",
      address: "",
      addressArr: [
        {
          address_name: "姜刘旭",
          address_phone: "15555978129",
          address_address: "滁州职业技术学院",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.shoppingCart = JSON.parse(sessionStorage.getItem("user"));
    this.shoppingCart2 = JSON.parse(sessionStorage.getItem("user"));
    // console.log(this.shoppingCart);
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  components: {
  },
  mounted() {
    this.getTOtalPrice();
  },
  methods: {
    ...mapActions({
      asyncchangeIsShowToast: "toastStatus/asyncchangeIsShowToast",
    }),
    sub(index) {
      // this.shoppingCart[index].jiage += this.shoppingCart2[index].jiage

      if (this.shoppingCart[index].goodsnum <= 1) {
        return this.asyncchangeIsShowToast({
          msg: "商品数量为1不可减少!!",
          type: "warning",
        });
      } else {
        this.shoppingCart[index].goodsnum--;
      }
      this.getTOtalPrice();
    },
    add(index) {
      // this.shoppingCart[index].jiage += this.shoppingCart2[index].jiage

      this.shoppingCart[index].goodsnum++;
      this.getTOtalPrice();
    },
    getTOtalPrice() {
      let pric = 0;
      this.shoppingCart.forEach((item, index) => {
        pric += item.goodsnum * this.shoppingCart2[index].jiage;
      });
      this.allprice = pric.toFixed(2);
    },
    sc(index) {
      this.shoppingCart.splice(index, 1);
      sessionStorage.removeItem("user");
      this.getTOtalPrice();
    },
    add_address() {
      let newobj = {
        address_name: this.name,
        address_phone: this.phone,
        address_address: this.address,
      };
      this.addressArr.push(newobj);
    },
    scaddress(index) {
      this.addressArr.splice(index, 1);
    },

    loginOutFn() {
      localStorage.removeItem("x-auth-token");
      setTimeout(() => {
        this.$router.push("/home");
      }, 2000);
    },
    cart() {
      this.isshowcart = true;
    },
    adress() {
      this.isshowcart = false;
    },
  },
  beforeRouteEnter(to, from, next) {
    let token = localStorage.getItem("x-auth-token");
    if (token) {
      next();
    } else {
      store._actions["toastStatus/asyncChanIsShowToast"][0]({
        msg: "你还没有登录！2222",
        type: "danger",
      });
    }
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/global.less";
.person_page {
  background: #fff;
  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    .cart_page {
      .center {
        text-align: center;
      }
    }
    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 60px;
      box-sizing: border-box;
      padding: 30px 18px 0;
      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;
        span {
          text-decoration: underline;
          color: #2a5df1;
        }
      }
      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        img {
          margin-right: 6px;
        }
      }
      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;
          &.active {
            color: @base-color;
            font-weight: bold;
            &::before {
              width: 2px;
              height: 14px;
              background: @base-color;
              display: inline-block;
              content: "";
              margin-right: 10px;
            }
          }
        }
      }
    }
    article {
      flex: 1;
      padding: 20px 0 0 0px;
      box-sizing: border-box;
      background: #fff;
      width: 800px;
    }
  }
}
.cart_title {
  display: flex;
  justify-content: space-between;
}
.cart1 {
  width: 180px;
  // border: 1px solid black;
  text-align: center;
}
.cart_detail {
  display: flex;
  justify-content: space-between;

  width: 940px;
  img {
    width: 180px;
  }
}
.cart2 {
  width: 180px;
  // border: 1px solid black;
  text-align: center;
  height: 206px;
  line-height: 180px;
}

.buyNow {
  color: white;
  background-color: orange;
  width: 150px;
  height: 46px;
}
</style>